<template>
  <Card title="产品与服务">
    <view class="hb-flex hb-flex-wrap hb-gap-3">
      <TImage
        v-for="(item, index) in botCardInfo.botProductServiceVoList"
        :key="item.id"
        :src="item.masterImage"
        border-radius="16rpx"
        width="136rpx"
        height="136rpx"
        @click="handleAddProductService(item.id)"
      />

      <TImage
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/addProduct.png"
        border-radius="16rpx"
        width="136rpx"
        height="136rpx"
        @click="handleAddProductService"
      />
    </view>
  </Card>
</template>

<script lang="ts" setup>
  /* 产品服务组件 */
  import Card from '../../components/Card/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { BotCardInfo } from '@/api/card/type';
  const props = defineProps<{
    botCardInfo: BotCardInfo;
  }>();
  const emit = defineEmits<{
    (e: 'success'): void;
  }>();
  const handleAddProductService = (id?: number) => {
    navigateTo({
      name: 'productServiceEdit',
      options: {
        id: id,
        success: () => {
          emit('success');
        },
      },
    });
  };
</script>

<style lang="scss" scoped>
  /* 使用Windi CSS，无需额外样式 */
</style>
